<template>
  <div class="home">
    <!--顶部区域布局---------- -->
    <div class="header">
      <div class="item">
        总销售额
        <div class='num'>{{ totalData.saleTotal }}</div>
        <div class="bottom">今日销售额：{{ totalData.sale }}</div>
      </div>
      <div class="item">总访问量
        <div class='num'>{{ totalData.viewsTotal }}</div>
        <div class="bottom">今日访问量：{{ totalData.views }}</div>
      </div>
      <div class="item">总收藏量
        <div class='num'>{{ totalData.collectTotal }}</div>
        <div class="bottom">今日销售额：{{ totalData.collect }}</div>
      </div>
      <div class="item">总支付量
        <div class='num'>{{ totalData.payTotal }}</div>
        <div class="bottom">今日支付量：{{ totalData.pay }}</div>
      </div>
    </div>

    <!--访问数据统计 ----------------->
    <div class="content">
      <div class="time-info" id='box13'>
        <div class="title">月销售额</div>
        <div id="charts" style="width: 100%; height: 300px" ref="myelement"></div>
      </div>
      <div class="area" id="box1">
        <div class="title">产品销售比例</div>
        <div id="pie" style="width: 100%; height: 300px" ref="myPieElement"></div>
      </div>
    </div>

    <!-- 最新内容 -->
    <div class="home-footer">
      <el-card class="box-card">
        <template #header>
          <span class="clearfix">今日订单</span>
        </template>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">今日订单数</div>
              <div>{{ orderData.curOrderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>{{ orderData.curCollect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">今日金额</div>
              <div>{{ orderData.curMoney }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <span class="clearfix">本月订单</span>
        </template>
        <div class="text item">
          <el-row>
            <el-col :span="8">
              <div class="title">本月订单数</div>
              <div>{{ orderData.orderCount }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">汇总确认订单</div>
              <div>{{ orderData.collect }}</div>
            </el-col>
            <el-col :span="8">
              <div class="title">累计金额</div>
              <div>{{ orderData.money }}</div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card">
        <template #header>
          <span class="clearfix">快捷入口</span>
        </template>
        <div class="text item">
          <el-button type="primary">产品管理</el-button>
          <el-button>消息管理</el-button>
          <el-button>内容管理</el-button>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script setup>
import { formatter } from 'element-plus';
import { onMounted, ref, reactive, getCurrentInstance } from 'vue';
//全局导入
const cxt = getCurrentInstance()
const API = cxt.appContext.config.globalProperties.$API
const echarts = cxt.appContext.config.globalProperties.$echarts

onMounted(() => {
  totalInfo()
  orderInfo()
  format()
})


//存放数据统计数据
const totalData = reactive({})
//请求首页数据统计数据
const totalInfo = async () => {
  let result = await API.totalInfo()
  // console.log(result);
  for (let k in result.data.list) {
    result.data.list[k] = formatNumberWithCommas(result.data.list[k]);
  }
  Object.assign(totalData, result.data.list)
}
//数据统计数据格式化处理
const formatNumberWithCommas = (number) => {
  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};


//今日订单数据
const orderData = reactive({})
//请求今日订单数据
const orderInfo = async () => {
  let result = await API.orderInfo()
  // console.log(result);
  Object.assign(orderData, result.list)
}

//echarts数据统计
// const formatData=reactive({})
const format = async() => {
  let result = await API.format()
  // console.log(result.result.data);
  const { sale_funnel, sale_money } = result.result.data
  //柱状图
  let arrx = [], arry1 = [], arry2 = [],piedata=[];
  sale_money.forEach(ele => {
    arrx.push(ele.name)
    arry1.push(ele.total_amount)
    arry2.push(ele.num)
    let obj = {}
    obj.name = ele.name
    obj.value = ele.total_amount
    piedata.push(obj)
  });
  line(arrx,arry1,arry2)
  // console.log(sale_funnel);
  //饼图
  pie(piedata)
  // let value = [], name = []
  // sale_funnel.forEach(ele => {
  //   value.push(ele.value)
  //   name.push(ele.name)
  // })
  // Object.assign(formatData, result.result.data)
}
//获取到的装图表的dom
const myelement = ref(null)
//柱状图
const line = (data,money,total) => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(myelement.value);
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: {
      data
    },
    yAxis: {},
    series: [
      {
        name: '销售额',
        type: 'line',
        data: money,
        smooth: true,
      },
      {
        name: '销售量',
        type: 'bar',
        data: total,
      }
    ]
  });
}
//获取到的装图表的dom
const myPieElement = ref(null)
//饼状图
const pie = (data) => {
  var myChart = echarts.init(myPieElement.value);
  var option;

  option = {
    tooltip: {
      trigger: 'item',
      formatter:'{a}<br/>{b}:{d}%'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '产品销售',
        type: 'pie',
        radius: '50%',
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  option && myChart.setOption(option);

}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding-right: 30px;

  .item {
    flex: 1;
    height: 100px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    margin-right: 20px;
    font-weight: bold;
    color: #fff;
    /* text-align: center; */
    position: relative;

    .num {
      font-size: 22px;
      margin: 10px;
      color: #fff;
    }

    .bottom {
      position: absolute;
      border-top: 1px solid rgb(246, 245, 245);
      padding: 10px 20px;
      bottom: 0;
      right: 0;
      left: 0;
      color: #fff;
      font-weight: normal;
    }
  }

  .item:nth-child(1) {
    background-image: linear-gradient(#df887d, #88554d);
  }

  .item:nth-child(2) {
    background-image: linear-gradient(#409eff, #2e556e);
  }

  .item:nth-child(3) {
    background-image: linear-gradient(#b54fa8, #713c7a);
  }

  .item:nth-child(4) {
    background-image: linear-gradient(#1cd2f1, #39717a);
  }
}

// 图表

.content {
  margin: 20px;
  display: flex;
  height: 320px;

  .time-info {
    flex: 2;
    background: #fff;
    margin-right: 20px;
    padding: 10px;
  }

  .area {
    flex: 1;
    background: #fff;
    padding: 10px;
  }
}

//内容

.home-footer {
  display: flex;
  padding-left: 20px;
  margin-bottom: 20px;

  .box-card {
    flex: 1;
    margin-right: 30px;

    // clearfix样式
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

    span {
      font-weight: 600;
    }
  }

  .item {
    text-align: center;
    font-size: 24px;
    color: #333;

    .el-col {
      border-right: 1px solid #eee;

    }

    .el-col:last-child {
      border-right: none;
    }

    .title {
      margin-bottom: 10px;
      font-size: 14px;
    }
  }
}
</style>